<template>
	<view class="apply-agent">
		<image class="banner-bg" :src="backImage" mode="aspectFill" />
		<!-- 申请条件 -->
		<view class="apply-a">
			<view class="apply-title">
				<text class="apply-conds">申请条件</text>
			</view>
			<!-- 商品列表 -->
			<view class="product-list">
				<view class="product-item" v-for="(item,index) in products" :key="index" @click="addToCart(item)">
					<image class="thumb " :src="item.productImage||'/static/default.png'" mode="aspectFill" />
					<view>
						<view class="text-ellipsis-2 f26 gray3 ">{{ item.productName }}</view>
						<view class="f24 price">￥<text class="f32 fb">{{ item.productPrice }}</text></view>
					</view>
				</view>
			</view>

		</view>
		<view class="apply-btn d-c-c">
			<!-- 确认按钮 -->
			<button class="btn-submit ww100" @click="apply" v-if="purchasedCount>0 ">
				立即申请
			</button>
			<button class="btn-submit ww100 dis" v-else>
				尚未达到申请条件
			</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				referInfo: {},
				purchasedCount: 0, // 已买商品数量
				requiredCount: 1, // 满足申请条件所需的商品数
				products: [],
				backImage: '',
			};
		},

		mounted() {

			/*数据*/
			this.getData();
		},
		onLoad(e) {
			let self = this;
			if (e.refereeId) {
				uni.setStorageSync('refereeId', e.refereeId);
			}
		},
		methods: {
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				})
				self._post('plus/agent/apply/product', {
					platform: self.getPlatform(),
					refereeId: uni.getStorageSync('refereeId') || 0
				}, function(res) {
					uni.hideLoading();
					self.products = res.data.productList;
					self.purchasedCount = res.data.buyNum;
					if (res.data.referInfo) {
						self.referInfo = res.data.referInfo;
					}

					self.backImage = res.data.backImage;
				});
			},

			selectReferee() {

			},
			addToCart(item) {
				let url = '/pages/product/detail/detail?productId=' + item.productId;
				this.gotoPage(url);
			},
			apply() {
				let url = '/pages/agent/apply/apply';
				this.gotoPage(url);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.apply-agent {
		position: relative;
		width: 750rpx;
		min-height: 1334rpx;
		background-color: #f9f9f9;
		z-index: 1;
	}

	// 顶部背景图
	.banner-bg {
		width: 750rpx;
		height: 348rpx;
	}


	// 推荐人
	.form-row {
		position: relative;
		top: -40rpx;
		background: #ffffff;
		margin: 0 20rpx;
		padding: 30rpx 30rpx;
		border-radius: 20rpx;
	}

	.label {
		font-size: 28rpx;
		color: #333333;
	}

	.apply-a {
		margin: 0 20rpx;
		padding: 20rpx;
		background: #fefbed;
		border-radius: 25rpx;
		margin-top: -48rpx;
		position: relative;
		z-index: 1;
		padding-bottom: 102rpx;
	}

	.apply-tip {
		margin: 20rpx 20rpx 0 20rpx;
		font-weight: 400;

		color: #333;

		.iconfont {
			font-size: 30rpx;
			color: #FF3645;
		}
	}

	.value-wrap {
		flex-direction: row;
		align-items: center;
	}

	.value {
		font-size: 28rpx;
		color: #999999;
		margin-right: 10rpx;
	}

	.iconfont {
		font-size: 30rpx;
		color: #CCCCCC;
	}

	// 申请条件
	.apply-title {
		height: 92rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		.apply-conds {
			display: inline;
			position: relative;
			font-size: 30rpx;
			font-weight: bold;
			color: #5A3713;
			background: #fefbed;
			z-index: 1;
			padding: 0 8rpx;
		}
	}

	.apply-title::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 0;
		background: #D7B077;
		width: 218rpx;
		height: 4rpx;
	}

	.conds-label {
		font-size: 28rpx;
		color: #fff;
	}

	.conds-count {
		font-size: 28rpx;
		color: #fff;
	}

	// 商品列表
	.product-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-item {
		border-radius: 15rpx;
		background: #ffffff;
		padding: 22rpx;
		height: 450rpx;
		width: 325rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;
	}

	.select-box {
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}

	.thumb {
		width: 284rpx;
		height: 284rpx;
		border-radius: 15rpx;
		margin-bottom: 10rpx;
	}

	.info {
		flex: 1;
	}

	.name {
		font-size: 26rpx;
		color: #333333;
		line-height: 1.4;
	}

	.price {
		color: #FF4C01;
	}

	// 底部按钮
	.apply-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 102rpx;
		text-align: center;
		background: #FFFFFF;
		z-index: 2;

	}

	.btn-submit {
		height: 82rpx;
		margin: 0 44rpx;
		font-size: 30rpx;
		border-radius: 44rpx;
		background: linear-gradient(0deg, #FFDCA2 0%, #FDC57A 100%);
		color: #5A3713;
	}

	.btn-submit.dis {
		background: linear-gradient(0deg, #feecd4 0%, #ffefd7 100%);
		color: #c0ab95;
	}
</style>